<template>
  <div id="top">
    <ul class="nav">
      <li :class="{ active: flag === 1 }" @click="flag = 1">
        <router-link to="/index">首页 </router-link>
      </li>
      <li :class="{ active: flag === 2 }" @click="flag = 2">
        <router-link to="/html">HTML </router-link>
      </li>
      <li :class="{ active: flag === 3 }" @click="flag = 3">
        <router-link to="/css">CSS3 </router-link>
      </li>
      <li :class="{ active: flag === 4 }" @click="flag = 4;login()">
        <router-link to="/test">学习小测验 </router-link>
      </li>
      <li :class="{ active: flag === 5 }" @click="flag = 5">
        <router-link to="/country">菜鸟教程 </router-link>
      </li>
      <li :class="{ active: flag === 6 }" @click="flag = 6;toBottom()">
        <router-link to="/index">登录/注册 </router-link>
      </li>
      <li :class="{ active: flag === 7 }" @click="flag = 7;toBottom()">
        <router-link to="/index">评分</router-link>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "top",
  data() {
    return {
      flag: 1,
    };
  },
  methods: {
    toBottom() {
      window.scrollTo(0, 2000);
    },
    login(){
      let login_info=localStorage.getItem("username")||"";
      if(login_info===""){
        this.$message({
          message:"请先登录~",
          type:"warning"
        });
        this.$router.push({path:'/'});
        this.flag=1;
      }else{
        this.$message({
          message:"让我们一起来看看你的学习成果吧~",
          type:"success"
        })
      }
    }
  },
};
</script>

<style>
</style>